// 只不过工作中我们不会直接使用css
// 而是使用效率更高的less scss sass postcss


// 我们怎么封装这个button组件

//支持的意思是帮你把配置文件写好了 但是不会帮你安装scss依赖

// webpack ---> css-loader miniExtractCSS
// 你的配置文件呢？ 配置文件被webpack藏起来了
// 我们通过调用yarn eject 命令来将他藏起来的配置文件找出来

// 由于通过React Cli创建的工程 【通过create-react-app等脚手架umijs】公司里用create-react-app用的也多一点
// 再不计会用next.js 名不副实
// 是基于webpack的 就意味着支持webpack的所有功能
export default function Button(props) {
  return (
    <div
      className="bg-red-500 flex text-8xl tw text-white w-12 h-48 max-md: bg-black max-md: w-5 w">{props.children || "click me"}</div>
  )
}

// 出现了config目录 和eject目录 代表已经eject 过了 eject 反编译 反编译过后就不能在反编译了
// 脚手架帮我们吧很多基础的东西【配置文件】都弄好了 不用我们自己去写了

// css 模块化会自动的帮你处理掉样式覆盖的问题
// 下节课 tailwind css + styled-component(解决模块化)：用js去写css